<template>
	<AppHeader :title="title" :banAnimate="true">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="book-details">
		<div class="content">
			<van-cell @click="cellClick(i)" is-link v-for="i in state.dataForm.sr" :key="i.id" class="cell-list">
				<template #title>
					<span class="ellipsis-multiline2 custom-title">
						{{i.resourceName}}
					</span>
				</template>
				<!-- 使用 right-icon 插槽来自定义右侧图标 -->
				<template #icon>
					<img class="img" src="@/assets/images/unit-icon.png" width="20" height="20" />
				</template>
				<template #label>
					<div class="unit-state" type="primary"
						v-if="i.resourceType =='992a5055-e9d0-453f-ab40-666b4d7030bb'">{{
					        i.moduleName }}</div>
					<div class="unit-state" type="green"
						v-if="i.resourceType =='3ac07125-31ac-11e5-a511-782bcb066f05'">{{
					        i.moduleName }}</div>
					<div class="unit-state" type="warning"
						v-if="i.resourceType =='a7527f97-14e6-44ef-bf73-3039033f128e'">{{
					        i.moduleName }}</div>
					<!-- <div class="tag-yellow" v-else>重点词组归纳</div> -->
				</template>
			</van-cell>
		</div>

	</div>
	<div class="tk-select" v-show="isshowTk" @click="hiddenTk">
		<div class="select-box">
			<div class="select-option circle-yellow" @click="clickArticle('Follow')">跟读</div>
			<div class="select-option circle-green" @click="clickArticle('Read')">朗读</div>
			<!-- <div class="select-option circle-blue" @click="clickArticle(3)">背诵</div> -->
		</div>
	</div>
	<AppLoading v-if="loading.page" />
</template>
<script setup>
	import {
		onMounted,
		reactive,
		toRefs,
		nextTick,
		ref
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		modelspChapterdetailt
	} from "@/api/writtenTest.js";
	import AppHeader from "@/components/AppHeader.vue";
	import AppLoading from "@/components/AppLoading.vue";
	import {
		commonQuestions
	} from "@/api/writtenTest";
	const unitlist = []
	const title = ref('')
	const route = useRoute();
	const router = useRouter();
	const isshowTk = ref(false)
	const seltObj = ref({})
	const state = reactive({
		loading: {
			page: false,
		},
		dataForm: {},
		testList: [],
		mescrollInstance: null,
		mescrollConfig: {
			down: {
				use: true,
			},
			up: {
				auto: true,
				isBounce: false,
				noMoreSize: 4,
				htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
				callback: (page) => {
					fetchListData(page);
				},
			},
		},
	});
	onMounted(async () => {
		if (route.query.versionId) {
			title.value = route.query.title
			await modelspChapterdetailt({
				id: route.query.versionId,
				pid: route.query.productId
			}).then(res => {
				state.dataForm = res.data
			})
			sessionStorage.setItem('query', JSON.stringify({
				...route.query,
				toName: 'mode'
			}))
		}
	})
	const cellClick = (i) => {
		seltObj.value = i
		isshowTk.value = true
	}
	const clickArticle = (mode) => {
		if (seltObj.value.resourceType == 'a7527f97-14e6-44ef-bf73-3039033f128e') {
			router.push({
				path: '/homework/followWordH5',
				query: {
					versionId: seltObj.value.versionId,
					resourceFile: seltObj.value.gunzipResPath_full,
					title: seltObj.value.resourceName,
					mode: mode,
					module: 'model',
					moduleName: "单词"
				}
			})
		} else if (seltObj.value.resourceType == '992a5055-e9d0-453f-ab40-666b4d7030bb') {
			router.push({
				path: '/homework/followTextH5',
				query: {
					versionId: seltObj.value.versionId,
					resourceFile: seltObj.value.gunzipResPath_full,
					title: seltObj.value.resourceName,
					mode: mode,
					module: 'model',
					moduleName: "课文"
				}
			})
		} else {
			showToast("功能模块未开发")
		}
	}
	const hiddenTk = () => {
		isshowTk.value = false
	}
	const onClickLeft = () => {
		router.go(-1);
	};
	const {
		loading,
		mescrollConfig,
		questionPopupShow
	} = toRefs(state);
</script>
<style scoped lang="scss">
	.book-details {
		background: #ffffff;
		height: 100%;
		padding-top: 44px;
		padding-bottom: 20px;
		overflow: scroll;

		.content {
			.cell-list {
				.custom-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 16px;
					color: #333333;
					line-height: 22px;
					text-align: left;
					font-style: normal;
					margin-bottom: 10px;
				}

				.img {
					margin-right: 5px;
					width: 20px;
					height: 20px;
				}
			}

			.unit-state {
				display: inline-block;
				padding: 0 10px;
				background: #FFF2E2;
				color: #FF9917;
				border-radius: 6px;
				transform: skewX(349deg);
				height: 22px;
				line-height: 22px;
				font-size: 12px;

				&[type=primary] {
					background: #E2F2FF;
					color: #0287FD;
				}

				&[type=warning] {
					background: #FFF2E2;
					color: #FF9917;
				}

				&[type=green] {
					background: #E3F6ED;
					color: #0CB76C;
				}
			}
		}
	}

	.tk-select {
		position: absolute;
		z-index: 2;
		background: rgba(0, 0, 0, 0.75);
		top: 40px;
		bottom: 0;
		left: 0;
		right: 0;

		.select-box {
			padding-top: 150px;
			padding-left: calc(50% - 50px);

			.select-option {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				text-align: center;
				line-height: 98px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 20px;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				margin-bottom: 60px;

				&.circle-yellow {
					background: #FF9917;
				}

				&.circle-green {
					background: #0CB76C;
				}

				&.circle-blue {
					background: #0287FD;
				}
			}
		}

	}
</style>